'use client';

import { useState } from 'react';
import Image from 'next/image';
import AnimatedBackground from '../components/AnimatedBackground';

export default function RegisterPage() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [password, setPassword] = useState('');
  const [isSendingCode, setIsSendingCode] = useState(false);
  const [countdown, setCountdown] = useState(0);

  const handleSendCode = async () => {
    if (!email || !email.includes('@')) return;
    
    setIsSendingCode(true);
    // TODO: 实现发送验证码的API调用
    
    // 开始倒计时
    setCountdown(60);
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          setIsSendingCode(false);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
  };

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    
    // TODO: 实现注册API调用
    console.log('注册信息:', { username, email, verificationCode, password });
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 relative overflow-hidden">
      <AnimatedBackground />
      <div className="max-w-md w-full space-y-8 p-8 rounded-lg shadow-lg relative z-10 backdrop-blur-sm 
        bg-gradient-to-br from-purple-500/90 via-indigo-500/90 to-purple-600/90 
        dark:from-purple-900/90 dark:via-indigo-900/90 dark:to-purple-950/90">
        {/* Logo */}
        <div className="flex flex-col items-center">
          <Image
            src="/LawyerAI-Logo.svg"
            alt="LawyerAI Logo"
            width={64}
            height={64}
            className="mb-4 dark:hidden"
          />
          <Image
            src="/LawyerAI-Logo-dark.svg"
            alt="LawyerAI Logo"
            width={64}
            height={64}
            className="mb-4 hidden dark:block"
          />
          <h2 className="text-2xl font-bold text-white">注册</h2>
          <p className="mt-2 text-sm text-gray-100">
            欢迎加入律师AI助手
          </p>
        </div>

        {/* 注册表单 */}
        <form className="mt-8 space-y-6" onSubmit={handleRegister}>
          <div className="space-y-4">
            {/* 用户名输入 */}
            <div>
              <label htmlFor="username" className="block text-sm font-medium text-white">
                用户名
              </label>
              <div className="mt-1">
                <input
                  id="username"
                  name="username"
                  type="text"
                  required
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-blue-300 rounded-md 
                    shadow-sm placeholder-gray-400 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                    bg-black/30 text-white backdrop-blur-sm
                    dark:border-blue-600 dark:placeholder-gray-500"
                  placeholder="请输入用户名"
                />
              </div>
            </div>

            {/* 密码输入 */}
            <div>
              <label htmlFor="password" className="block text-sm font-medium text-white">
                密码
              </label>
              <div className="mt-1">
                <input
                  id="password"
                  name="password"
                  type="password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-blue-300 rounded-md 
                    shadow-sm placeholder-gray-400 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                    bg-black/30 text-white backdrop-blur-sm
                    dark:border-blue-600 dark:placeholder-gray-500"
                  placeholder="请输入密码"
                />
              </div>
            </div>

            {/* 邮箱输入 */}
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-white">
                邮箱地址
              </label>
              <div className="mt-1">
                <input
                  id="email"
                  name="email"
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-blue-300 rounded-md 
                    shadow-sm placeholder-gray-400 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                    bg-black/30 text-white backdrop-blur-sm
                    dark:border-blue-600 dark:placeholder-gray-500"
                  placeholder="请输入邮箱地址"
                />
              </div>
            </div>

            {/* 验证码输入 */}
            <div>
              <label htmlFor="code" className="block text-sm font-medium text-white">
                验证码
              </label>
              <div className="mt-1 flex space-x-3">
                <input
                  id="code"
                  name="code"
                  type="text"
                  required
                  value={verificationCode}
                  onChange={(e) => setVerificationCode(e.target.value)}
                  className="flex-1 min-w-0 block w-full px-3 py-2 border border-blue-300 rounded-md 
                    shadow-sm placeholder-gray-400 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                    bg-black/30 text-white backdrop-blur-sm
                    dark:border-blue-600 dark:placeholder-gray-500"
                  placeholder="请输入验证码"
                />
                <button
                  type="button"
                  onClick={handleSendCode}
                  disabled={isSendingCode || !email.includes('@')}
                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium 
                    rounded-md shadow-sm text-white 
                    bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700
                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                    disabled:from-blue-400 disabled:to-blue-400 disabled:cursor-not-allowed
                    dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800"
                >
                  {countdown > 0 ? `${countdown}秒后重试` : '获取验证码'}
                </button>
              </div>
            </div>
          </div>

          <div>
            <button
              type="submit"
              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm 
                text-sm font-medium text-white 
                bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800
                transition-all duration-200 ease-in-out
                transform hover:scale-105"
            >
              注册
            </button>
          </div>

          {/* 登录链接 */}
          <div className="text-center">
            <a href="/login" className="text-sm text-gray-100 hover:text-white">
              已有账号？点击登录
            </a>
          </div>
        </form>
      </div>
    </div>
  );
}
